<template>
	<view class="">
		<u-popup :show="show" @close="close" mode="bottom" closeable>
			<view class="share-view">
				<view class="share-item">
					<button open-type="share" class="share-btn"></button>
					<image src="@/static/images/icon/weixin1.png" mode="aspectFit"></image>
				</view>
				<view class="share-item" @click="sharePoster">
					<image src="@/static/images/icon/haibao.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="poster-image" @click.stop="closeImage" v-if="imageShow">
				<!-- <image src="@/static/images/icon/2824.png" mode="aspectFit" class="share-image" longpress=""></image> -->
				<view class="poster-canvas" style="margin: 175rpx auto;">
					<canvas canvas-id="phonecasePoster" class="poster-canvas" @click.stop="()=>{}"></canvas>
				</view>
				<view class="poster-btn" @click.stop="()=>{}">
					<!-- <image src="@/static/images/icon/pyq.png" mode="" @click.stop="toPyq()"></image> -->
					<image src="@/static/images/icon/download.png" mode="" @click.stop="toDownload()"></image>
				</view>
			</view>
		</u-popup>
		<canvas canvas-id="sharePoster" class="share-canvas" @click.stop="()=>{}"></canvas>
	</view>

</template>

<script>
	import {
		generateShare
	} from '@/api/custom.js'
	export default {
		name: "share",
		props: {
			sourceId: {
				type: String || Number,
				default: '',
			},
			posterImage: {
				type: String,
				default: '',
			},
			type: {
				type: String,
				default: '3',
			},
			shareText: {
				type: String,
				default: '',
			},
			price: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				show: false,
				imageShow: false,
				posterUrl: '',
			};
		},
		methods: {
			open() {
				this.show = true
			},
			openImage() {
				this.imageShow = true
			},
			close() {
				this.show = false
				this.imageShow = false
				// console.log('close');
			},
			closeImage() {
				this.imageShow = false
			},
			sharePoster() {
				this.openImage()
				this.getImages()
				uni.showLoading({
					mask: true
				})
			},
			toPyq() {},
			toDownload() {
				const _this = this
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									_this.downloadImage()
								},
								fail(err) {
									console.error(err);
									uni.hideLoading()
								}
							})
						} else {
							_this.downloadImage()
						}
					}
				})
			},
			// 保存图片
			downloadImage() {
				const _this = this
				uni.canvasToTempFilePath({
					canvasId: 'phonecasePoster',
					success: (res) => {
						console.log(res);
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								wx.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								_this.close()
							},
							fail(err) {
								wx.showToast({
									title: '保存失败，请重试',
									icon: 'none',
									duration: 2000
								});
								console.error(err);
							}
						});
					},
					fail: (err) => {
						console.error('导出图片失败', err);
					}
				}, this);
			},
			// 绘制canvas
			drawCanvas(avatar, mainImage, codeImage) {
				const timer = setTimeout(() => {
					clearTimeout(timer)
					const screenWidth = uni.getWindowInfo().screenWidth
					const pixel = 750 / screenWidth
					const ctx = uni.createCanvasContext('phonecasePoster', this)

					ctx.fillStyle = "#f6f6f9";
					ctx.fillRect(0, 0, 700 / pixel, 1050 / pixel)
					ctx.drawImage(mainImage, -75 / pixel, 70 / pixel, 800 / pixel, 800 / pixel);
					ctx.fillRect(0, 0, 25 / pixel, 1050 / pixel)
					ctx.fillRect(675 / pixel, 0, 25 / pixel, 1050 / pixel)
					ctx.fillRect(0, 845 / pixel, 700 / pixel, 25 / pixel)
					ctx.fillStyle = "#333";
					ctx.font = "18rpx Arial"
					ctx.fillText("CasesTry", 25 / pixel, 50 / pixel);
					// ctx.drawImage(avatar, 25 / pixel, 25 / pixel, 80 / pixel, 80 / pixel);
					ctx.fillStyle = "#666666";
					// if (this.type == 3) {
					// 	ctx.font = "25rpx Arial bold"
					// 	ctx.fillText("￥" + this.price, 245 / pixel, 920 / pixel);
					// }
					// if (this.type == 2) {
					ctx.font = "13rpx Arial"
					// ctx.fillText("50+种特定风格可定制", 245 / pixel, 890 / pixel);
					ctx.fillText("海量模板，10+机壳材质外观可定制", 280 / pixel, 50 / pixel);
					// }

					ctx.fillStyle = "#000000";
					ctx.drawImage(codeImage, 25 / pixel, 855 / pixel, 180 / pixel, 180 / pixel);
					// if (this.type == 3) {
					// 	ctx.font = "14rpx Arial bold"
					// 	ctx.fillText(this.shareText, 245 / pixel, 960 / pixel);
					// 	ctx.font = "12rpx Arial"
					// 	ctx.fillText("长按识别CasesTry 官方小程序，购买商品！", 245 / pixel, 1000 / pixel);
					// }
					// if (this.type == 0) {
						ctx.font = "14rpx Arial"
						ctx.fillText("长按识别CasesTry 官方小程序，", 245 / pixel, 960 / pixel);
						ctx.fillText("来AI定制您的专属手机壳吧！", 245 / pixel, 1000 / pixel);
					// }
					ctx.draw();
					uni.hideLoading()
				}, 1000)
			},
			// 生成5:4分享图
			drawCanvas1() {
				return new Promise(resolve => {
					const screenWidth = uni.getWindowInfo().screenWidth
					const pixel = 750 / screenWidth
					uni.getImageInfo({
						src: this.posterImage,
						success: (res) => {
							const ctx1 = uni.createCanvasContext('sharePoster', this)
							ctx1.fillStyle = "#ffffff";
							ctx1.fillRect(0, 0, 500 / pixel, 400 / pixel)
							ctx1.drawImage(res.path, 50 / pixel, 0, 400 / pixel, 400 / pixel);
							ctx1.draw();
						}
					})

					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'sharePoster',
							success: (res) => {
								console.log(res);
								resolve(res.tempFilePath)
							},
							fail: (err) => {
								console.error('导出图片失败', err);
							}
						}, this);
					}, 1000);
				})

			},
			async getImages() {
				const {
					data
				} = await generateShare({
					type: 2,
					sourceType: this.type,
					sourceId: this.sourceId
				})
				const image = data.imageUrl
				let arr = [
					// 小程序头像
					// new Promise((resolve, reject) => {
					// 	uni.getImageInfo({
					// 		src: '/static/image/icon/wx.png',
					// 		success: (res) => {
					// 			resolve(res.tempFilePath)
					// 		}
					// 	})
					// }),

					// 主体照片
					new Promise((resolve, reject) => {
						uni.getImageInfo({
							src: this.posterImage,
							success: (res) => {
								resolve(res.path)
							}
						})
					}),
					// 小程序码
					new Promise((resolve, reject) => {
						uni.getImageInfo({
							src: image,
							success: (res) => {
								resolve(res.path)
							}
						})
					})
				]
				Promise.all(arr).then(imageInfos => {
					this.drawCanvas(imageInfos[0], imageInfos[0], imageInfos[1])
				}).catch((error) => {
					console.log(error);
				})

			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.share-view {
		display: flex;
		justify-content: space-around;

		.share-item {
			height: 78rpx;
			width: 78rpx;
			margin: 100rpx;
			position: relative;

			.share-btn {
				position: absolute;
				height: 100rpx;
				width: 100rpx;
				z-index: 1;
				top: 0;
				left: -7rpx;
				opacity: 0;
			}
		}

		image {
			height: 100%;
			width: 100%;
			position: relative;
			overflow: unset;

			&:nth-child(1)::after {
				content: '分享海报';
				bottom: -30rpx;
				left: calc(50% - 50rpx);
				color: #333;
				position: absolute;
				width: 100rpx;
				text-align: center;
				color: #6C7172;
			}

			&:nth-child(2)::after {
				content: '分享好友';
				bottom: -30rpx;
				left: calc(50% - 50rpx);
				color: #333;
				position: absolute;
				width: 100rpx;
				text-align: center;
				color: #6C7172;
			}
		}
	}

	.poster-image {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #0003;
		z-index: 1;

		.poster-canvas {
			height: 1050rpx;
			width: 700rpx;
			background-color: #f6f6f9;
			border-radius: 26rpx;
			overflow: hidden;
		}

		.poster-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 260rpx;
			background-color: #EBEBEB;
			display: flex;
			justify-content: space-between;
			width: 100%;

			image {
				height: 120rpx;
				width: 120rpx;
				margin: 50rpx auto;
				background-color: #fff;
				padding: 33rpx;
				box-sizing: border-box;
				border-radius: 17rpx;
				position: relative;
				overflow: unset;

				&:nth-child(1)::after {
					content: '保存到相册';
					bottom: -35rpx;
					left: calc(50% - 70rpx);
					color: #333;
					position: absolute;
					width: 140rpx;
					text-align: center;
					color: #6C7172;
				}

				&:nth-child(2)::after {
					content: '保存到相册';
					bottom: -35rpx;
					left: calc(50% - 70rpx);
					color: #333;
					position: absolute;
					width: 140rpx;
					text-align: center;
					color: #6C7172;
				}
			}
		}
	}

	.share-canvas {
		height: 400rpx;
		width: 500rpx;
		position: absolute;
		top: -1000rpx;
		left: -1000rpx;
		z-index: -1;
	}
</style>